<template>
  <div>
    <div :class="'image-div ' + imageDivHover">

      <el-image
        style="width: 120px; height: 120px"
        :src="file"
        fit="cover"
        class="image-file-one"
      >
        <div slot="error" v-if="!file">
          <div class="image-slot" @click="clickFile">
            <i class="el-icon-plus icon-image"></i>
          </div>

        </div>
      </el-image>
      <div class="image-background">
        <div class="image-background-auto">
          <el-row>
            <el-col :span="12">
              <i class="el-icon-view icon-image-button" @click="clickFileView"></i>
            </el-col>
            <el-col :span="12">
              <i class="el-icon-delete icon-image-button" @click="clickFileDelete"></i>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <div style="width: 100%;text-align: center">
        <img style="max-width: 100%" :src="dialogImageUrl" alt="">
      </div>
    </el-dialog>

    <DialogResource
      :dialogResourceVisible="dialogResourceVisible"
      @closeDialogResource="closeDialogResource"
      @selectResourceClick="selectResourceClick"
    />
  </div>
</template>

<script>
import DialogResource from '@/views/resource/components/DialogResource'
export default {
  name: 'FileUpload',
  components: { DialogResource },
  props: ['type', 'file'],
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      dialogResourceVisible: false,
      imageDivHover: ''
    }
  },
  computed: {
  },
  created() {
    var _this = this
    setTimeout(() => {
      _this.getImageDivHover()
    }, 500)
  },
  methods: {
    getImageDivHover() {
      if (this.file) {
        this.imageDivHover = 'image-div-hover'
      } else {
        this.imageDivHover = ''
      }
    },
    clickFile() {
      this.dialogResourceVisible = true
    },
    closeDialogResource({ dialogResourceVisible }) {
      this.dialogResourceVisible = dialogResourceVisible
    },
    selectResourceClick({ select }) {
      if (!select?.name_url) {
        return
      }
      this.file = select.name_url
      this.$emit('selectFile', { select })
      this.getImageDivHover()
    },
    clickFileView() {
      this.dialogVisible = true
      this.dialogImageUrl = this.file
    },
    clickFileDelete() {
      this.file = ''
      this.getImageDivHover()
    }
  }
}
</script>

<style scoped>
  .icon-image{
    font-size: 40px;
    cursor: pointer;
  }
  .icon-image-button{
    font-size: 25px;
    cursor: pointer;
    color: #fff;
  }
  /*.file-div-one{*/
  /*  position: absolute;*/
  /*  width: 120px;*/
  /*  height: 120px;*/
  /*  top:0px;*/
  /*  left: 0px;*/
  /*}*/
  .image-background{
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(0, 0, 0, 0.5);
    top:0px;
    left: 0px;
    display: none;
  }
  .image-background-auto{
    text-align: center;
    margin: 0px auto;
    width: 70%;
    margin-top: 45px;
  }
  .image-slot{
    text-align: center;
    line-height: 130px
  }
  .image-div{
    position: relative;
    width: 120px;
    height: 120px;
    border: 1px solid #ccc;
  }
  .image-div-hover:hover .image-background{
    display: block;
  }
</style>
